<template>
  <footer>  
            <div>
                <router-link to="/" exact>
                    <i class="iconfont">&#xe603;</i>
                    <span class="active">外卖</span>
                </router-link> 
            </div>
            <div>
                <router-link to="/discovery">
                    <i class="iconfont">&#xe6a4;</i>
                    <span>发现</span>
                </router-link>
            </div>
            <div>
                <router-link to="/orderpage">
                    <i class="iconfont">&#xe601;</i>
                    <span>订单</span>
                </router-link>
            </div>  
            <div>
                <router-link to="/personpage">
                <i class="iconfont">&#xe64a;</i>
                <span>我的</span>
                </router-link>
            </div>
            </footer>
</template>
<script>
export default {
  name:'footerpage'
}
</script>
<style lang="scss" scoped>
@import '../../static/px2rem.scss';
footer {
    height: px2rem(50);
    border-top: px2rem(3) solid #f4f4f4;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    background: white;
    .router-link-active{
        color: #2d7ead!important;
    }
    
      div {
      width: 25%;
      height: 100%;
        a{   
        display: inline-block;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        i{
          margin-bottom: px2rem(3);
          font-size: px2rem(23);
          font-weight: bold;
        }
        span {
          font-size: px2rem(10);
        }
      }

    }
    
}
</style>
